import React from "react"
import '../css/todoBar.css'
import { TODOKEY, FINISHED, PENDDING, DELETED } from './confing' //引用状态
class TodoBar extends React.Component {
    constructor(props) {
        super(props)
        this.state = ({
            todos: JSON.parse(localStorage.getItem(TODOKEY)) || [], // 本地保存源数据
            FINISHED:[],
            PENDDING:[]
        })
    }
    // 生命周期 
    // 创建阶段 组件将要挂载
    componentWillMount() {
        // 跟新组件本身的初始状态
        this.setState({
            filtersTodos: this.state.todos
        })
    }
    render() {
        return (
            <div className="todobar_box_container">
                <div className="todobar_box_wrapper">
                    <div className="todobar_list_container">
                        <div className="todo_list_title">
                            <h2>正在进行</h2>
                      <div className="todobar_number_container">1</div>
                        </div>
                        <div>
                            { //插值
                                this.state.todos.map((element, index) => {
                                    // console.log(index);
                                    if (element.status === PENDDING) {
                                        return <div key={index}
                                            className="todo_list_title_container"
                                        >
                                            <div className="input_container">
                                                <input
                                                    checked={element.status === FINISHED}
                                                    type="checkbox"
                                                    onChange={(event) => {
                                                        // console.log(event.target.checked);
                                                        var checked = event.target.checked;
                                                        if (checked) {
                                                            // console.log(index)
                                                            element.status = FINISHED;
                                                        } else {
                                                            element.status = PENDDING;
                                                        }
                                                        // 更新组件状态
                                                        this.setState({
                                                            todos: this.state.todos
                                                        })
                                                        //本地保存输入进去的值
                                                        localStorage.setItem(TODOKEY, JSON.stringify(this.state.todos))
                                                    }} /></div>
                                            <div className="todo_title_list">{element.content}</div>
                                            <div className="button_container"
                                                onClick={() => {
                                                    element.status = DELETED;
                                                    var index = this.state.todos.findIndex((subelement) => {
                                                        return subelement.content === element.content;

                                                    })
                                                    if (index !== -1) {
                                                        this.state.todos.splice(index, 1)
                                                    }
                                                    this.setState({
                                                        todos: this.state.todos
                                                    })
                                                    localStorage.setItem(TODOKEY, JSON.stringify(this.state.todos))
                                                }}><button>-</button></div>
                                        </div>
                                    }
                                })
                            }
                        </div>
                    </div>
                    <div>
                        <div className="todo_list_title">
                            <h2>已经完成</h2>
                            <div className="todobar_number_container">1</div>
                        </div>
                        <div>
                            {
                                this.state.todos.map((element, index) => {
                                    if (element.status === FINISHED) {
                                        return <div key={index}
                                            className="todo_list_title_container">
                                            <div className="input_container">
                                                <input
                                                    checked={element.status === FINISHED}
                                                    type="checkbox"
                                                    onChange={(event) => {
                                                        // console.log(event.target.checked);
                                                        var checked = event.target.checked;
                                                        if (checked) {
                                                            // console.log(index)
                                                            element.status = FINISHED;
                                                        } else {
                                                            element.status = PENDDING;
                                                        }
                                                        // 更新组件状态
                                                        this.setState({
                                                            todos: this.state.todos
                                                        })
                                                        //保存
                                                        localStorage.setItem(TODOKEY, JSON.stringify(this.state.todos))
                                                    }} /></div>
                                            <div className="todo_title_list">{element.content}</div>
                                            <div className="button_container"
                                                onClick={() => {
                                                    element.status = DELETED;
                                                    var index = this.state.todos.findIndex((subelement) => {
                                                        return subelement.content === element.content;
                                                    })
                                                    if (index !== -1) {
                                                        this.state.todos.splice(index, 1)
                                                    }
                                                    this.setState({
                                                        todos: this.state.todos
                                                    })
                                                    localStorage.setItem(TODOKEY, JSON.stringify(this.state.todos))
                                                }}>
                                                <button>-</button></div>
                                        </div>
                                    }
                                })
                            }
                        </div>
                    </div>
                </div>
            </div>
        )
    }
    // 组件完成挂载
    componentDidMount() {

    }
    //更新阶段
    componentWillReceiveProps(props) {
        // console.log(props);
        //接受新的 props 跟新组件的状态
        this.props = props;
        // 去重: findIndex 查找数组中是否有符合天剑元素，如果有返回下标，否则返回-1
        var index = this.state.todos.findIndex((element) => {
            return element.content === this.props.todo.content
        })
        if (index !== -1) {
            alert("不能添加重复的ToDo")
            return;
        }
        this.state.todos.push(this.props.todo)
        // 保存
        localStorage.setItem(TODOKEY, JSON.stringify(this.state.todos))
        this.setState({
            todos: this.state.todos
        })
    }
    // 是否允许组件更新
    shouldComponentUpdate() {
        return true;
    }
    // 即将更新
    componentDidUpdate() {

    }
    // 完成更新
    componentDidUpdate() {

    }
}
export default TodoBar